<template>
  <div class="box2">
    <p>我是ComponentA</p>
    <p>propName: {{ propName }}</p>
    <p>name: {{ name }}</p>
    <p>isPublished: {{ isPublished }}</p>
    <p>commentIds: {{ commentIds }}</p>
    <p>author: {{ author }}</p>
    <button @click="addAge">子组件传值给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'component-a',
  props: {
    propName: {
      type: String,
      validator(value) {
        return ['success', 'warning', 'danger'].includes(value)
      },
      default: 'success',
      required: true
    },
    name: String,
    isPublished: {
      type: Boolean,
      default: false
    },
    commentIds: {
      type: Array,
      default() {
        return [4, 5, 6]
      }
    },
    author: {
      type: Object,
      default() {
        return {
          name: '张三',
          age: 18
        }
      }
    }
  },
  inheritAttrs: true,
  methods: {
    addAge() {
      console.log(this.author)
      this.$emit('setAge', this.author.age + 1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
